<template>
  <div class="box home-user-task-stats bgc1">
    <div class="header">
      <div class="title">
        工单统计
      </div>
    </div>
    <div v-if="!loading" class="body">
      <div class="stats">
        <div class="item">
          <div class="num color1 text-shadow1">
            {{ 
              userTaskStats[0]?.status_count +
              userTaskStats[1]?.status_count +
              userTaskStats[2]?.status_count +
              userTaskStats[3]?.status_count
            }}
          </div>
          <div class="text color2">工单总数（个）</div>
        </div>
      </div>
      <div class="stats">
        <div class="item">
          <div class="num color1 text-shadow1">
            {{ userTaskStats[3]?.status_count }}
          </div>
          <div class="text color2">完成工单（个）</div>
        </div>
      </div>
      <div class="stats">
        <div class="item">
          <div class="num color1 text-shadow1">
            {{ userTaskStats[1]?.status_count + userTaskStats[2]?.status_count }}
          </div>
          <div class="text color2">进行工单（个）</div>
        </div>
      </div>
      <div class="stats">
        <div class="item">
          <div class="num color1 text-shadow1">
            {{ userTaskStats[0]?.status_count }}
          </div>
          <div class="text color2">取消工单（个）</div>
        </div>
      </div>
    </div>
    <div v-else>
      加载中...
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import { getData } from '@/api/manage/task';

// 定义变量
const start = dayjs().startOf('month').format('YYYY.MM.DD');
const end = dayjs().endOf('day').format('YYYY.MM.DD');
const userTaskStats = ref([]); // 使用 ref 定义响应式数据
const loading = ref(true); // 初始加载状态为 true

// 定义方法
const getList = async () => {
  try {
    const response = await getData();
    userTaskStats.value = response; // 更新响应式数据
  } catch (error) {
    console.error("Error fetching data:", error);
  } finally {
    loading.value = false; // 数据加载完成
  }
};

// 调用方法
(async () => {
  await getList();
  console.log(userTaskStats.value)
})();
</script>
<style lang="scss" scoped>
// TODO: 首页、人效统计、对账统计样式抽出组件
.home-user-task-stats {
  display: flex;
  flex-direction: column;
  height: calc((100vh - 120px) * 0.2);
  min-height: 166px;
  background: #E9F3FF;
  border-radius: 20px;

  .body {
    flex: 1;
    display: flex;

    .stats {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .item {
        display: inline-flex; // 关键点
        flex-direction: column;

        .num {
          height: 50px;
          font-size: 36px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          line-height: 50px;
          text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
        }

        .text {
          height: 17px;
          margin-top: 3px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #91a7dc;
          line-height: 17px;
        }

        .color1 {
          color: #072074;
        }

        .color2 {
          color: #91a7dc;
        }

        .color3 {
          color: #ff5757;
        }

        .color4 {
          color: #de9690;
        }

        .text-shadow1 {
          text-shadow: 2px 4px 7px rgba(85, 132, 255, 0.5);
        }

        .text-shadow2 {
          text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
        }
      }
    }
  }
}

.bgc1 {
  background: #E9F3FF;
  background-image: url('@/assets/images/circle.png'), url('@/assets/images/task.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;

}

.bgc2 {
  background: #FBEFE8 url('@/assets/images/sale.png') no-repeat calc(100% - 12px) 100%;
}
</style>